<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文商在线</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/H5/css/sm.min.css">
    <link rel="stylesheet" href="/H5/css/malltwo.css?v=20190513">
    <style>
        .card:nth-child(odd){left:2%!important;}
    </style>
</head>
<body>
<div class="page-group ms-controller" :controller="index">
    <div class="page page-current">
        <div class="content visibility">
            <!--<span class="empty"></span>--> <!--这个为不出现空白盒子解决的方法-->
            <a :attr="{'href': @index_adv_link}"  style="display: block;height: 1.5rem; width: 100%;text-align: center;margin: 2px auto 0 auto;">
                <img :attr="{'src': @index_adv_pic}" style="width: 100%;height: 8.5rem;" class="maxWidth" >
            </a>
            <!-- <div style="position: absolute; right: .7rem; top: 0; font-size: 1.1rem; z-index: 99999999">
                <a class="tab-item external" href="/H5/message">
                  <span class="icon icon-message"></span>
                  <span style="background-color: red;font-size: .6rem; padding: 2px; border-radius: 1rem; position: relative;top: -9px; right: 5px; color: #fff" :if="@message>0">{{@message}}</span>
                </a>
            </div> -->
            <!--<div class="searchbar row" style="margin: 0 10px 0 0;">
                <div class="search-input col-80">
                    <label class="icon icon-search" for="search"></label>
                    <input type="search" id='search' placeholder='输入关键字...'/>
                </div>
                <a class="button button-fill button-primary col-20">搜索</a>
            </div>-->
            <!-- <div class="searchbar" style="margin: 0 10px 0 10px;">
                <a class="searchbar-cancel">取消</a>
                <div class="search-input">
                    <label class="icon icon-search" for="search"></label>
                    <input type="search" id='search' placeholder='输入关键字...'/>
                </div>
            </div> -->
            <ul class="ctrl">
                <!-- <li><a href="/H5/mall"><img src="/H5/images/index_icons_03.png" alt=""><p>精品商城</p></a></li>
                <li><a href="/H5/member"><img src="/H5/images/index_icons_05.png" alt=""><p>会员资料</p></a></li> -->
                <!--<li><a href="/H5/article"><img src="/H5/images/index_icons_07.png" alt=""><p>精彩报道</p></a></li>-->


            <!--    <li :for="el in poster">
                    <a :attr="{'href': '/H5/goodstype?id='+el.id}">
                        <img :attr="{'src': el.pic_url||'/H5/images/none.png'}" alt="">
                    <p> {{el.title}}</p>
                    </a>
                </li>-->
                <li><a href="/H5/goodstype"><img src="/H5/images/nav_4.png" alt="">
                    <p>全部产品</p></a></li>
                <li><a href="/H5/goodstype?id=3"><img src="/H5/images/nav_11.png" alt="">
                    <p>品牌特惠</p></a></li>
                <li><a href="/H5/goodstype?id=4"><img src="/H5/images/nav_12.png" alt="">
                    <p>人气爆单</p></a></li>
                <li><a href="/H5/goodstype?id=5"><img src="/H5/images/nav_9.png" alt="">
                    <p>运动用品</p></a></li>





                <!--:visible="@data.open_expert==1" 艺宝在线li里面的判断是否展示-->
                <!-- <li style="position:relative;"><a href="/H5/message"><img src="/H5/images/xiaoxi.png" alt=""><p>消息中心</p><span :visible="@message>0" style="position:absolute; top: -5px; right: 5px; background-color: #f00; color: #fff; min-width: 1.5rem; height: 1.5rem;border-radius: 1.2rem; border: 3px solid #fff;">{{@message}}</span></a></li> -->
            </ul>

           <!-- <ul class="ctrl" style="margin-top: 0;">
                <li><a href="/H5/goodstype?id=6"><img src="/H5/images/nav_3.png" alt="">
                    <p>美妆洗护</p></a></li>
                <li><a href="/H5/goodstype?id=14"><img src="/H5/images/nav_13.png" alt="">
                    <p>母婴儿童</p></a></li>
                <li><a href="/H5/goodstype?id=15"><img src="/H5/images/nav_14.png" alt="">
                    <p>美食保健</p></a></li>
                <li><a href="/H5/goodstype?id=16"><img src="/H5/images/nav_10.png" alt="">
                    <p>特价引流</p></a></li>

            </ul>

            <ul class="ctrl" style="margin-top: 0;">
                <li><a href="/H5/goodstype?id=18"><img src="/H5/images/nav_3.png" alt="">
                    <p>纺织鞋服</p></a></li>
                <li><a href="/H5/goodstype?id=19"><img src="/H5/images/nav_13.png" alt="">
                    <p>生鲜水果</p></a></li>
                <li><a href="/H5/goodstype?id=20"><img src="/H5/images/nav_14.png" alt="">
                    <p>面膜专区</p></a></li>
                <li><a href="/H5/goodstype?id=21"><img src="/H5/images/nav_10.png" alt="">
                    <p>箱包配饰</p></a></li>

            </ul>-->
            <!--<div class="press_release">
                <div class="p_top">
                    <span style="font-size: .9rem;line-height: 1.3rem;"><span></span>新闻公告:</span><div><marquee behavior="" direction="">{{@list[0].title}}</marquee></div><span><a href="/H5/notice" style="color:white">更多</a></span>
                </div>

                <div class="news" :for="el in @list">
                    <a :attr="{'href': '/H5/articledetial?noticeId='+el.id }">
                        <div>
                            <span><img :attr="{'src': el.cover_path}"></span>
                            <span><p>{{el.title}}</p><p>{{el.description}}</p>
                            <div class="see_detail">
                                <div style="color:white">查看详情</div>
                            </div>
                    </span>
                        </div>
                    </a>

                </div>

                <div class="news">
                    <span><img src="/H5/images/index_7.png"></span><span>
                    <p>全新O2O2C商业模式</p><p>给您带来不一样的全新体验，互联网+超市二合一，购物更加方便快捷</p>
                    <div class="see_detail">查看详情</div>
                </span>
                </div>
            </div>-->
            <div class="r_top">
                精品推荐&nbsp;>
            </div>
            <!-- <div class="banner">
                 <ul>
                     <li :for="el in @banner"><a :attr="{'href': el.link_url}" style="display:block; background-color: #eee; width:100%; height: 100%;">
                         <img :attr="{'src': el.pic_path}" width='100%' height="100%" onerror="$(this).css('display','none')" alt="">
                     </a></li>
                 </ul>
             </div>-->
            <div :for="el in @goods">
                <div class="goods-list" style="padding-bottom: .6rem;">
                    <div class="card demo-card-header-pic" :for="e in el.list" style="margin: .5rem 0 0 0;width: 47%;left:4%;display:inline-block;" :on-click="@jump(@iv?'/H5/detail?id='+e.id+'&inviteCode='+@iv:'/H5/detail?id='+e.id)">
                        <div valign="bottom" class="card-header color-white no-border no-padding">
                            <a :css="{'background-image': e.list_cover?'url('+e.list_cover+')':'#eee'}" class="goods" style="display: block;width: 100%;height: 152px;background-size: contain; background-position: center; background-repeat: no-repeat;">
                            </a>
                        </div>
                        <div class="card-content">
                            <div class="card-content-inner" style="overflow: hidden;padding: .3rem;">
                                <p class="color-gray" style="color: #8c2193; font-size: .8rem; padding-bottom: 10px;border-bottom: 1px dashed #aaa;overflow: hidden;text-overflow: ellipsis;white-space:nowrap;">{{e.title+" "+e.intro}}</p>
                                <p :if="@vip_level==0" style="color: rgb(222, 66, 101); font-size: .8rem">￥{{e.sell_price}}<span style="color: #333333;  font-size: .7rem; margin-left: .2rem;">团购价</span><span style="float: right; font-size: .7rem; background-color: #e66ca6; color: #fff; padding: .3rem; border-radius: 2px;margin-top: .2rem;">立即购买</span></p>
                                <p :if="@vip_level>0" style="color: rgb(222, 66, 101); font-size: .8rem">￥{{e.price_1}}<span style="color: #333333; font-size: .7rem; margin-left: .2rem;">瑞生价</span><span style="float: right; font-size: .7rem; background-color: #e66ca6; color: #fff; padding: .3rem; border-radius: 2px;margin-top: .2rem;">立即购买</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<footer>
                <p></p>
            </footer>-->
        </div>
        <nav class="bar bar-tab" style="background-color: white">
            <a class="tab-item external active" href="/H5">
                <span class="new_footer"><img src="/H5/images/footer_01.png" alt=""></span>
                <span class="tab-label">首页</span>
            </a>
            <!--<a class="tab-item external" href="/H5/custom?type=1">
                <span class="new_footer"><img src="/H5/images/footer_02.png" alt=""></span>
                <span class="tab-label">客服</span>
                &lt;!&ndash; <span class="badge" :if="@message>0">{{@message}}</span> &ndash;&gt;
            </a>-->
            <a class="tab-item external" href="/H5/order">
                <span class="new_footer"><img src="/H5/images/footer_03.png" alt=""></span>
                <span class="tab-label">购物车</span>
            </a>
            <a class="tab-item external" href="/H5/orderlist?status=0">
                <span class="new_footer"><img src="/H5/images/footer_04.png" alt=""></span>
                <span class="tab-label">订单管理</span>
            </a>
            <!-- <a class="tab-item external" href="/H5/message">
              <span class="icon icon-message"></span>
              <span class="tab-label">订单管理</span>
              <span class="badge" :if="@message>0">{{@message}}</span>
            </a> -->
            <a class="tab-item external" href="/H5/myMember">
                <span class="new_footer"><img src="/H5/images/footer_05.png" alt=""></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>
    </div>
</div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='/H5/js/wx.js' charset='utf-8'></script> -->
<!-- <script type='text/javascript' src='http://res2.wx.qq.com/open/js/jweixin-1.4.0.js' charset='utf-8'></script> -->
<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
<script>
    var timer;
    var index = avalon.define({
        $id: "index",
        loading: false,
        message: "",
        banner: [],
        iv: simpleStorage.get('inviteCode'),
        is_vip: Mall.parseUrl(window.location.href).is_vip,
        picture_urls: "",
        vip_level: "",
        goods: [],
        data: {},
        list: {},
        index_adv_link: '',
        index_adv_pic: '',
        getNews: function () {

            Mall.request("/api/ArticleList", {cate: "notice", page_num: 1, page_size: 2})
                    .always(function (data) {
                        if (data.error_code == 0) {
                            index.list = data.data.list;
                        }
                    })
        },
        getMallHome: function () {
            Mall.request("/api/MallHome", {page_size: 50, is_vip: index.is_vip})
                    .always(function (data) {
                        if (data.error_code == 0) {
                            index.banner = data.data.banner;
                            index.goods = data.data.goods;
                            index.index_adv_link = data.data.index_adv_link;
                            index.index_adv_pic = data.data.index_adv_pic;
                            if (data.data.banner && data.data.banner.length > 1) {
                                if (data.data.banner.length == 2) {
                                    var datas = data.data.banner;
                                    datas.push(data.data.banner[0]);
                                    index.banner = datas;
                                }
                                $(".banner ul").css("width", index.banner.length * 100 + "%");
                                $(".banner ul li").css("width", 100 / index.banner.length + "%");

                                function autoRoll() {
                                    $(".banner ul").animate({"margin-left": "-200%"}, 300, "linear", function () {
                                        $($(".banner ul li")[0]).remove().clone().appendTo(".banner ul");
                                        $(".banner ul").css({"margin-left": "-100%"});
                                    })
                                }

                                timer = setInterval(function () {
                                    autoRoll();
                                }, 3000);

                                function swipe(k) {
                                    timer && clearInterval(timer);
                                    if (k == "left") {
                                        $(".banner ul").animate({"margin-left": "-200%"}, 300, "linear", function () {
                                            $($(".banner ul li")[0]).remove().clone().appendTo(".banner ul");
                                            $(".banner ul").css({"margin-left": "-100%"});
                                            timer = setInterval(function () {
                                                autoRoll();
                                            }, 3000)
                                        })
                                    }
                                    else {
                                        $(".banner ul").animate({"margin-left": 0}, 300, "linear", function () {
                                            $($(".banner ul li")[$(".banner ul li").length - 1]).remove().clone().prependTo(".banner ul");
                                            $(".banner ul").css({"margin-left": "-100%"});
                                            timer = setInterval(function () {
                                                autoRoll();
                                            }, 3000)
                                        })
                                    }
                                }

                                $(".banner ul").swipeLeft(function () {
                                    swipe("left");
                                })
                                $(".banner ul").swipeRight(function () {
                                    swipe();
                                })
                            }
                            avalon.scan(document.body);
                        }
                        $(".content").removeClass("visibility")
                    })
        },
        getUrl: function () {
            if (index.loading) {
                return
            }
            index.loading = true;
            Mall.request("/api/SynLogin")
                    .always(function (data) {
                        if (data.error_code == 0) {
                            window.location.href = data.data.syn_login_url
                        }
                        else {
                            $.alert(data.error_msg);
                            index.loading = false;
                        }
                    })
        },
        getUrl2: function () {
            if (index.loading) {
                return
            }
            index.loading = true;
            Mall.request("/api/SynLogin2")
                    .always(function (data) {
                        if (data.error_code == 0) {
                            window.location.href = data.data.syn_login_url
                        }
                        else {
                            $.alert(data.error_msg);
                            index.loading = false;
                        }
                    })
        },
        info: function () {
            Mall.request("/api/UserInfo")
                    .always(function (data) {
                        if (data.error_code == 0) {
                            index.message = data.data.total_unread;
                            index.vip_level = data.data.vip_level;
                            simpleStorage.set("inviteCode", data.data.invite_code)
                        }
                    })
        },
        jump:function(url){
            window.location.href = url;
        }
    })
    index.getMallHome();
    index.getNews();
    simpleStorage.get("token") && index.info();
</script>
</body>
</html>